<!DOCTYPE html>
<html>

<head>

	<meta charset="UTF-8">
	<title>Hello,Jan</title>
	<link rel="stylesheet" type="text/css" href="resources/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="resources/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="resources/themes/color.css">
	<script type="text/javascript" src="resources/jquery.min.js"></script>
	<script type="text/javascript" src="resources/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="resources/easyui-lang-zh_CN.js"></script>
	<style rel="stylesheet" type="text/css">
		.l-btn-icon {
			background-size: contain;
		}
	</style>
</head>

<body class="easyui-layout" style="margin-left: 10px;padding-right: 10px;">
	<div data-options="region:'north',border:false" style="height:50px;background:#212121;">
		<div>
			<img src="resources/logo.png" style="height: 50px;">
		</div>
	</div>
	<div class="easyui-layout" data-options="region:'center',border:false" style="padding: 0px;">
		<div data-options="region:'west',border:false"
			style="width: 55%; padding: 10px;border-right-width: 1px;background-color:#f1f1f1;">
			<form id="apiGenForm">
				<table style="width: 100%;margin-top: 0px;">
					<tr>
						<td>
							<input class="easyui-textbox" name="baseURL" label="服务地址" labelAlign="center"
								style="width: 100%;" data-options="required:true">
						</td>
						<td>
							<input class="easyui-textbox" name="token" label="API Token" labelAlign="center"
								style="width: 100%;" data-options="required:true">
						</td>
					</tr>
					<tr>
						<td style="width: 50%;"><input class="easyui-textbox" name="date" label="日期" labelAlign="center"
								style="width: 100%;" data-options="required:true"></td>
						<td style="width: 50%;"><input class="easyui-numberbox" name="amount" label="数量"
								labelAlign="center" style="width: 100%;" data-options="required:true,min:0,value:100">
						</td>
					</tr>
					<tr>
						<td style="width: 50%;"><input class="easyui-textbox" name="profileId" label="初始编号"
								labelAlign="center" style="width: 100%;" data-options="required:true"></td>
						<td style="width: 50%;">
							<select class="easyui-combobox" name="proxyType" label="代理类型" labelAlign="center"
								style="width: 100%;" data-options="required:true,editable:false">
								<option value="socket5">Socket5</option>
								<option value="HTTP">HTTP</option>
							</select>
						</td>
					</tr>
					<tr>
						<td style="width: 50%;"><input class="easyui-textbox" name="profileId" label="代理IP"
								labelAlign="center" style="width: 100%;" data-options="required:true"></td>
						<td style="width: 50%;"><input class="easyui-numberbox" name="proxyType" label="代理端口"
								labelAlign="center" style="width: 100%;" data-options="required:true,min:0,value:1000">
						</td>
					</tr>
					<tr>
						<td style="width: 50%;">
							<input class="easyui-checkbox" name="fixedPort" label="端口固定" labelAlign="center">
						</td>
					</tr>
				</table>
			</form>
			<div style="text-align: center;margin-top: 20px;">
				<a href="#" class="easyui-linkbutton c8" onclick="starGen()">开始生成</a>
			</div>
		</div>
		<div data-options="region:'east',border:false"
			style="width: 45%;height: 100%;padding: 10px;background-color:#f1f1f1;">

		</div>
	</div>

</body>
<script type="text/javascript">
	function starGen() {
		if (false == $('#apiGenForm').form('validate')) {
			return;
		}
		var formInput = form2JSON("apiGenForm");
		var intBaseProfile = parseInt(formInput.profileId);
		var intBasePort = parseInt(formInput.profileId);

		for (var i = 0; i < parseInt(formInput.amount); i++) {
			var request = {
				name: formInput.date + "-" + (intBaseProfile + i),

			};
		}
		apiRequest(formInput.baseURL, {}, function (resp) {
			console.log("xxx");
		});
	}

	function form2JSON(formId) {
		var serializeObj = {};
		var array = $("#" + formId).serializeArray();
		$(array).each(function () {
			if (serializeObj[this.name]) {
				if ($.isArray(serializeObj[this.name])) {
					serializeObj[this.name].push(this.value);
				} else {
					serializeObj[this.name] = [serializeObj[this.name], this.value];
				}
			} else {
				serializeObj[this.name] = this.value;
			}
		});
		return serializeObj;
	}

	function apiRequest(apiURL, kvdata, success,error) {
		$.ajax({
			type: "POST",
			url: apiURL,
			contentType: "application/json;UTF-8",
			dataType: "jsonp",
			data: kvdata,
			success: function (data, textStatus) {
				success && success(data, textStatus);
			},
			error: function (request, textStatus, errorThrown) {
				error && error(request, textStatus, errorThrown);
			}
		});
	}

</script>

</html>